<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length">
			<view class="d-m-t-20 d-flex d-col-top">
				<u-image :src="info.picture" width="210rpx" height="248rpx"></u-image>
				<view class="d-m-l-20 d-flex-1">
					<view class="d-font-30 u-line-1">{{ info.name }}</view>
					<!-- <view class="d-flex d-m-t-18">
						<view class="d-tag d-flex" v-if="info.specif">{{ info.specif }}</view>
					</view> -->
					<view class="d-font-24 d-be d-m-t-20">【身份标签3-16/65-70 岁被监护人】需在监护人的陪同下入场</view>
					<view class="d-font-24 d-be d-m-t-20">{{ choose_date }} {{ nametime }}</view>
					<view class="d-m-t-60 d-font-30 d-red">
						<text class="d-font-24">￥</text>
						<text class="d-bold">{{ info.selling_price }}</text>
					</view>
				</view>
			</view>
			<view class="d-flex d-m-t-30 d-p-b-30 u-border-bottom">
				<view class="d-flex-1 d-font-28">购买数量(校外)</view>
				<view>
					<view class="d-font-28 d-flex d-row-center">x{{ number }}</view>
				</view>
			</view>
			<!-- <view class="d-font-28 d-p-t-30">
				<view>支付人员</view>
				<view>
					<radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change1'>
						<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in Listpay"
							:key="index">
							<u-image src="/static/card.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28">{{item.name}}</view>
							<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
								style="transform:scale(0.8)" />
						</label>
					</radio-group>
				</view>
			</view> -->
			<view class="" v-if="member_type">
				<radio-group >
					<label class="item flex-between">
						<view class="flex-align">
							<u-avatar size="60rpx" :src="memberlist.member_photo"></u-avatar>
							<view class="info">
								<view class="name">{{ memberlist.member_name }} </view>
							</view>
						</view>
						<view class="radioBox" style="padding-left: 34rpx">
							<radio :value="index" color=" #59A0FF" :checked="true" style="transform: scale(0.8);"/>
						</view>
					</label>
				</radio-group>
			</view>
			<view class="d-font-28 d-p-t-30" v-if="member_type">
				<view>支付人员</view>
				<view>
					<!-- <radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change2'>
						<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in List_pay"
							:key="index">
							<u-avatar size="60rpx" :src="item.member_photo"></u-avatar>
							<view class="d-m-l-20 d-flex-1 d-font-28">{{item.member_name}}</view>
							<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
								style="transform:scale(0.8)" />
						</label>
					</radio-group> -->
					<checkbox-group shape="circle">
						<label class="item flex-between" v-for="(item, index) in List_pay" :key="index"
							@click="radioChecked(index, item)">
							<view class="flex-align">
								<u-avatar size="60rpx" :src="item.member_photo"></u-avatar>
								<view class="info">
									<view class="name">{{ item.member_name }} <text style="margin-left: 15rpx;">{{ item.member_sex }}</text><text style="margin-left: 15rpx;">{{ item.member_age }}</text><text style="margin-left: 15rpx;">{{ item.flag_text }}</text> <text style="margin-left: 15rpx;">{{ item.time_period }}</text> </view>
									<view class="phone">{{ item.member_phone }} <text>{{item.tips}}</text> </view>
								</view>
							</view>
							<view class="radioBox" style="padding-left: 34rpx">
								<checkbox color="#2f75fa" :value="item.id" :checked="item.checked" style="transform: scale(0.8);" :disabled="item.alert ? true : false"/>
							</view>
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="d-font-28 d-p-t-30">
				<view>支付方式</view>
				<view>
					<!-- <u-radio-group v-model="paytype" active-color="#59A0FF" size="40rpx" placement="column">
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(1)">
							<u-image src="/static/card.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '1'">{{ payList[1] }}</view>
							<u-radio name="1"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-if="hasPay(2)">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '2'">
								<text>{{ payList[2] }}</text>
								<text class="d-red">{{ count }}</text>
							</view>
							<u-radio name="2"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30 u-border-bottom"
							v-if="hasPay(5) && multifunctional_card_count > 0">
							<u-image src="/static/count.png" width="40rpx" height="40rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '5'">
								<text>{{ payList[5] }}</text>
								<text class="d-red">{{ multifunctional_card_count }}</text>
							</view>
							<u-radio name="5"></u-radio>
						</view>
						<view class="d-flex d-p-t-30 d-p-b-30" v-if="hasPay(3)">
							<u-image src="/static/wx.png" width="40rpx" height="35rpx"></u-image>
							<view class="d-m-l-20 d-flex-1 d-font-28" @click="paytype = '3'">{{ payList[3] }}</view>
							<u-radio name="3"></u-radio>
						</view>
					</u-radio-group> -->

					<view class="form">
						<radio-group @change='change3'>
							<label class="item flex-align" v-for="(item,index) in pay_List" :key="index">
								<image mode="aspectFit" src="/static/card.png"></image>
								<view class="flex-between item-con">
									<text>{{item.name}}</text>
									<radio :value="index" color=" #59A0FF" :checked="index == 0 ? true : false"
										@change="radioChange(item)" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>

		<d-agent :show="show.agent" title="用户须知" :content="info.user_content" @confirm="show.agent = false"></d-agent>
		<d-mode :show="show.confirm" :content="'确定支付？'" @cancel="show.confirm = false"
			@confirm="confirm"></d-mode>
		<d-mode-cancel :show="show.cancel" content="是否放弃本次付款？" @cancel="cancelPay"
			@confirm="confirm"></d-mode-cancel>

		<u-popup @touchmove.stop :show="consultant" @close="closeAmount2" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup">
				<view class="store-popup">
					<view class="title flex-between">
						<text>支付人员</text>
						<u-icon @click="closetant" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
					</view>
					<scroll-view class="scroll-view_H" scroll-y="true" :scroll-top="scrollTop">
						<view>
							<radio-group active-color="#59A0FF" size="40rpx" placement="column" @change='change2'>
								<label class="d-flex d-p-t-30 d-p-b-30 u-border-bottom" v-for="(item,index) in List_pay"
									:key="index">
									<!-- <u-image :src="item.member_photo" width="40rpx" height="40rpx"></u-image> -->
									<u-avatar size="60rpx" :src="item.member_photo"></u-avatar>
									<view class="d-m-l-20 d-flex-1 d-font-28">{{item.member_name}}</view>
									<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
										style="transform:scale(0.8)" />
								</label>
							</radio-group>
						</view>
					</scroll-view>
					<u-button type="primary" shape="circle" :custom-style="{
							height: '80rpx',
							width: '80vw',
							fontSize: '30rpx',
							background: '#59A0FF'
						}" @click="okSubmit">
						确定
					</u-button>
				</view>

			</view>
		</u-popup>

		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" shape="circle" active-color="#59A0FF" v-model="agent">
						<u-checkbox label="我已同意和接受" name="ok" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
					<text class="d-font-24">的全部内容</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<!-- <view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red"
							v-if="info.selling_price">{{ (info.selling_price * number).toFixed(2) }}</text>
					</view> -->
					<view class="d-flex-1 d-font-30" v-if="member_type">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red" v-if="num_ber.length>0">{{ (info.selling_price * num_ber.length ).toFixed(2) }}</text>
						<!-- <text class="d-red" v-else> {{ (info.selling_price * number).toFixed(2) }}</text> -->
						<text class="d-red" v-else>0.00 </text>
					</view>
					<view class="d-flex-1 d-font-30" v-else>
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red" 
							v-if="info.selling_price">{{ (info.selling_price * number).toFixed(2) }}</text>
					</view>
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}" @click="$noMultipleClicks(afterSubmit)">
							提交订单
						</u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		ticketDetail,
		payList,
		createOrder,
		mList,getMember
	} from '@/common/api';
	export default {
		data() {
			return {
				noClick: true, //限制点击
				list: [],
				info: {},
				number: 1,
				has_child: 1,
				show: {
					agent: false,
					confirm: false,
					cancel: false
				},
				id: '',
				payList: {},
				count: 0,
				multifunctional_card_count: 0,
				paytype: '1',
				agent: ['ok'],
				Listpay: [{
						name: '自己',
						type: '8',
						id: '8'
					},
					{
						name: '他人',
						type: '9',
						id: '9'
					}
				],
				consultant: false,
				List_pay: [],
				payChoose: {},
				member_type: '',
				time_id: '',
				choose_date: '',
				pay_List: [],
				pay_Choose: {},
				payname: '',
				payid: '',
				panduan: 0,
				pay_way: '',
				applicant:[],
				nametime:'',
				num_ber:[],
				memberlist:{},
				memberlist:{},
				applicantlist:[]
			};
		},
		onLoad(e) {
			console.log(e, '[[]]')
			this.id = e.id;
			this.time_id = e.time_id,
			this.choose_date = e.choose_date
			this.nametime = e.nametime
			this.number = e.number;
			this.has_child = e.has_child;
			if (e.member_type) {
				this.member_type = e.member_type;
			}
			this.show.agent = true
		},
		onBackPress(e) {
			if (e.from === 'backbutton') {
				this.show.cancel = true;
				return true;
			}
		},
		methods: {
			getPersonalInfo(){
				getMember()
					.then(res => {
						this.memberlist = res
					})
					.catch(err => {
						uni.$u.toast('服务器繁忙,请稍后再试!');
					});
			},
			radioChecked(index, item) {
				this.applicantlist = []
				item.checked = !item.checked
				this.selectLength = this.List_pay.filter(item => item.checked).length || 0
				// let applicant = []
				this.List_pay.forEach((el, idx) => {
					if (el.checked) {
						this.applicantlist.push(el.member_id)
					}

				})
				console.log(this.applicantlist)
				this.num_ber = this.applicantlist
				this.applicant = this.applicantlist.toString()
				console.log(this.applicant)
			},
			change3(e) {
				this.panduan = 1
				let that = this
				let i = e.detail.value
				const item = this.pay_List[i]
				if (item) {
					this.pay_Choose = item
					this.pay_List[i].checked = true
				} else {
					this.pay_Choose = {}
				}
				this.payname = that.pay_Choose.name
				this.pay_way = that.pay_Choose.pay_way
				this.payid = that.pay_Choose.id
			},
			okSubmit() {
				this.consultant = false;
				let pay_id = this.List_pay[0].member_id
				this.payChoose = this.List_pay[0]
				for (let i = 0; i < this.List_pay.length; i++) {
					if (this.List_pay[i].checked) {
						pay_id = this.List_pay[i].member_id
						this.payChoose = this.List_pay[i]
						break
					}
				}
				// this.member_type = 3
				console.log(this.payChoose, '【【【【')
			},
			closeAmount2() {
				this.consultant = false;
			},
			closetant() {
				this.consultant = false
				this.list_items = []
				this.xiaoshou = true
			},
			change1(e) {
				if (e.detail.value == 1) {
					this.consultant = true
					this.familyData()
				} else {
					this.payChoose = ''
					this.member_type = ''
					this.consultant = false
				}

			},
			change2(e) {
				let that = this
				let i = e.detail.value
				const item = this.List_pay[i]
				if (item) {
					this.payChoose = item
					this.List_pay[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
			familyData() {
				mList()
					.then(res => {
						this.List_pay = res;
					})
			},
			getData() {
				payList().then(res => {
					console.log(res, 'oopp')
					this.pay_List = res.newlist;
					this.count = res.free_count;
					this.multifunctional_card_count = res.multifunctional_card_count;
					if (this.member_type) {
						this.familyData()
					}
				});
				ticketDetail({
						id: this.id
					})
					.then(res => {
						this.$refs.paging.complete([res]);
						this.info = res;
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			// 是否含有支付方式
			hasPay(pay_type) {
				return this.payList[pay_type] ? true : false;
			},
			afterSubmit() {
				let money = this.info.selling_price * this.num_ber.length
				if (!this.agent.length) {
					return uni.$u.toast('请阅读并同意《用户须知》');
				}
				
				if (this.member_type) {
					if (money == '0.00') {
						return uni.$u.toast('请选择预约人员');
					}
				}

				this.show.confirm = true;
			},
			confirm() {
				if (this.member_type) {
					let pay_id = this.List_pay[0].member_id
					this.payChoose = this.List_pay[0]
					for (let i = 0; i < this.List_pay.length; i++) {
						if (this.List_pay[i].checked) {
							pay_id = this.List_pay[i].member_id
							this.payChoose = this.List_pay[i]
							break
						}
					}
				}

				if (this.panduan == 0) {
					this.payid = this.pay_List[0].id
					this.pay_way = this.pay_List[0].pay_way
					this.pay_Choose = this.pay_List[0]
					for (let i = 0; i < this.pay_List.length; i++) {
						if (this.pay_List[i].checked) {
							// payid = this.pay_List[i].id
							this.pay_Choose = this.pay_List[i]
							break
						}
					}
				}

				this.show.confirm = false;
				this.show.cancel = false;
				uni.showLoading({
					title: '订单提交中...',
					mask: true
				});
				createOrder({
						goods_id: this.id,
						goods_number: this.number,
						order_type: 1,
						has_child: this.has_child,
						pay_way: this.pay_way,
						member_type: this.member_type,
						// member_id: this.payChoose.member_id,
						member_id: this.applicant,
						time_id: this.time_id,
						choose_date: this.choose_date,
						pay_card_id: this.payid
					})
					.then(res => {
						console.log(res, 'yyyy')
						console.log(this.pay_way, 'yyyy')
						if (this.pay_way != 3) {
							uni.$u.toast('支付成功');
						}
						setTimeout(() => {
							if (this.pay_way != 3) {
								uni.$u.route({
									url: '/pages/mine/ticket',
									type: 'redirectTo'
								});
							} else {
								// 支付宝、微信
								// 说的跳转url
								window.location.href = res.pay_url;
							}
						}, 2000);
					})
					.catch(err => {});
			},
			getPayName(name) {
				if (name) {
					return name.replace(/[:\s]/g, '');
				}
				return name;
			},
			cancelPay() {
				uni.navigateBack();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}

	.minus,
	.plus {
		width: 38rpx;
		height: 38rpx;
		background: #f3f3f3;
	}

	.input {
		width: 64rpx;
		font-size: 28rpx;
	}

	.d-notice {
		background-color: #f6f6f6;
		margin: 0 -30rpx;
	}

	.d-main {
		color: #59a0ff;
	}

	.d-66 {
		color: #666;
	}

	.store-popup {
		padding: 20rpx 0;

		.title {
			padding: 0px 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #cccccc;
			font-weight: bold;

			.clo {
				color: #2f75fa;
			}
		}

		.scroll-view_H {
			height: 50vh;
			overflow: auto;
			padding-bottom: 30rpx;

			.list-12 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap; //自动换行
				justify-content: center;
				align-items: center;


				.item-coach {
					margin-top: 30rpx;
					height: 100rpx;
					padding: 0px 0rpx;
					overflow: hidden;
					background: #ffeae9;
					width: 30%;
					border-radius: 9px 9px 9px 9px;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-left: 0.8%;
					text-align: center;
					line-height: 100rpx;

					.price {
						font-size: 26rpx;
						font-weight: 500;
						color: #ff1c1c;
						justify-content: center;

					}

					.item-2 {
						background: #f7f7fa;
						width: 0;
						flex: 1;
						height: 100%;
						display: flex;
						border-radius: 0 9px 9px 0;
						flex-direction: column;
						justify-content: center;
						padding-left: 40rpx;
						position: relative;

						.info-1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
						}

						.info-2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #bebebe;
							margin-top: 20rpx;
						}

						.radio {
							position: absolute;
							right: 30rpx;
						}
					}
				}
			}
		}


		.btn {
			padding: 0px 30rpx;
			margin-top: 20rpx;
		}
	}

	.form {
		box-sizing: border-box;

		.item {
			padding: 0rpx 30rpx;
			background-color: white;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.item-con {
				flex: 1;
				width: 0;
				font-size: 26rpx;
				padding: 40rpx 0;
				color: #333333;
				border-bottom: 1px solid #EFEFEF;

				.pirce {
					color: #888888;
				}
			}

			radio {
				transform: scale(0.8);
			}
		}
	}

	.checkbox .wx-checkbox-input {
		border-radius: 20upx;
		/* 圆角 */
		width: 20upx;
		/* 背景的宽 */
		height: 20upx;
		/* 背景的高 */
		border: 1px solid #ccc;
		background: #eee;
	}

	/* 复选框禁用样式 */

	.checkbox .wx-checkbox-input-disabled {
		border-radius: 20upx;
		/* 圆角 */
		width: 20upx;
		/* 背景的宽 */
		height: 20upx;
		/* 背景的高 */
		background: #f3f3f3;
		border: 1px solid rgba(201, 201, 201, 1);
	}

	/* 复选框选中后样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: rgba(255, 129, 92, 1);
		border: 1px solid rgba(255, 129, 92, 1);
	}

	/*checkbox选中后图标样式 */

	.checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 20upx;
		height: 20upx;
		line-height: 20upx;
		text-align: center;
		font-size: 24upx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

	/deep/ checkbox .wx-checkbox-input {
		border-radius: 50% !important;
		color: #ffffff !important;
	}

	/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		color: #fff;
		background: #59A0FF;
	}

	/deep/.wx-checkbox-input.wx-checkbox-input-checked {
		border: none !important;
	}

	.item {
		margin-top: 30rpx;

		.info {
			margin-left: 20rpx;

			.name {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.phone {
				font-size: 24rpx;
				font-weight: 500;
				color: #bebebe;
				margin-top: 10rpx;
			}
		}
	}
</style>